<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading">
		<el-row :gutter="30">


			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item label='家庭名称' prop=''>
					{{ isNullOrEmpty( familyName?.familyName ) }}
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item label='所属个体用户' prop=''>
					{{ isNullOrEmpty( familyName?.userName ) }}
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityId' prop='unityId'>
					<IndivduaiSelectList v-model='formInline.unityId' clearable :placeholder='prompt?.unityId'
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'unityId')">
					</IndivduaiSelectList>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item label='授权设备'>
					<pure-table class="mt-0" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)" showOverflowTooltip
					row-key="deviceId" 	border :isShowPag="false" ref="tableref" @selection-change="selectionChange">

					</pure-table>
				</el-form-item>
			</re-col>

		</el-row>
	</el-form>
</template>
<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import ReCol from "@/components/ReCol";
import { titles, prompt } from './index';
import { getdeviceList } from '@/api/manage/Individual-management/Individual-management/empower'
import IndivduaiSelectList from '@/components/select/superviseUnitySelect/superviseUnitySelect.vue'
import type { infoType } from '@/api/manage/Individual-management/Individual-management/empower';
import type { FormRules } from "element-plus";
import { formValidateField } from '@/utils/functions'

const tableData = reactive({
	data: [],
	total: 0,

});
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	familyName: any
}
const tableref = ref(null);
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	familyName: null,
});
console.log('hhh', props);

const formRules = reactive(<FormRules>{
	unityId: [{
		required: true,
		message: prompt?.unityId,
		trigger: 'blur'
	},],

});
const selectionData = ref([]); //多选
const ruleFormRef = ref();
const roleTableConfig = [
	{ type: "selection", align: "left" },
	{ prop: 'deviceId', label: '编号' },
	{ prop: 'deviceSN', label: '设备序列号' },
	{ prop: 'productName', label: '产品类型' },
	// { slot: 'action', label: titles.action, width: 150, fixed: 'right' },
];

onMounted(() => {
	setTimeout(() => {
		getTableList()
	}, 500)

})
const selectionChange = data => {  //多选
	selectionData.value = data;
	props.formInline.deviceIds = selectionData.value.map(item => item.deviceId)
	//   console.log('selectionData',data,props.formInline.deviceIds);

};

//获取授权设备列表
console.log('formInline', props.formInline);
const getTableList = () => {

	getdeviceList({ familyId: props.familyName.id }).then(res => {
		tableData.data = res.result;
		nextTick(()=>{
			props.formInline.devices.forEach(item => {
			//deviceId
			tableData.data.forEach(item1 => {
				if (item.id == item1.deviceId) {
					tableref.value.getTableRef().toggleRowSelection(item1,true)
				}
			});

		});
		})
	
	})

	
}
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>